<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('operation.activityPage') }}</span><!--活动页面-->
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" @giveParentData="appData" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item>
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="handleShowAdd('')" icon="el-icon-plus" type="primary">{{ $t('common.add') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column :label="$t('operation.bannerName')" prop="name" min-width="150"><!--名称--></el-table-column>
                        <el-table-column :label="$t('operation.description')" prop="introduction" show-tooltip-when-overflow min-width="180"></el-table-column><!--介绍-->
                        <el-table-column :label="$t('operation.link')" prop="actionUrl" min-width="120"><!--链接--></el-table-column>
                        <el-table-column :label="$t('operation.releaseTime')" prop="startTime" min-width="120"><!--发布时间--></el-table-column>
                        <el-table-column :label="$t('operation.endTime')" prop="endTime" min-width="120"><!--结束时间-->
                            <template slot-scope="{row}">{{ row.endTime ? row.endTime : '--' }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.status')" prop="status" min-width="120"><!--状态-->
                            <template slot-scope="{row}">
                                <el-switch @change="handleSwitch(row)" active-value="1" inactive-value="0" v-model="row.status"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('common.operation')" prop="overdueCount" min-width="120"><!--操作-->
                            <template slot-scope="{row}">
                                <el-button @click="handleShowAdd(row)" type="text">{{ $t('common.edit') }}</el-button><!--编辑-->
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->

        <!--新增活动 start -->
        <el-dialog title="编辑/添加" :visible.sync="showAddDialog" width="460px" :close-on-click-modal="false">

            <el-form ref="activityForm" :model="activityForm" :rules="activityFormRules" label-width="100px">

                <!--app名称-->
                <el-form-item prop="appName" :label="$t('system.appName')">
                    <select-app-list v-model="activityForm.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                </el-form-item>

                <!--名称-->
                <el-form-item :label="$t('operation.bannerName')" prop="name">
                    <el-input v-model="activityForm.name"></el-input>
                </el-form-item>

                <!--链接-->
                <el-form-item :label="$t('operation.link')" prop="actionUrl">
                    <el-input v-model="activityForm.actionUrl"></el-input>
                </el-form-item>

                <!--介绍图片-->
                <el-form-item :label="$t('operation.introductionPicture')" prop="introductionImg">
                    <upload-image-button v-if="!activityForm.introductionImg" v-model="activityForm.introductionImg" :check-size="checkSize" :tips="$t('operation.bannerSize')" :right-tips="true" />
                    <div v-else class="show_img">
                        <span @click="activityForm.introductionImg=''" class="del_img el-icon-close"></span>
                        <img :src="activityForm.introductionImg" alt="">
                    </div>
                </el-form-item>

                <!--介绍-->
                <el-form-item :label="$t('operation.description')" prop="introduction">
                    <el-input type="textarea" v-model="activityForm.introduction"></el-input>
                </el-form-item>

            </el-form>

            <div slot="footer">
                <el-button @click="closeDialog">{{ $t('common.cancel') }}</el-button><!--取消-->
                <el-button @click="submit" type="primary">{{ $t('common.confirm') }}</el-button><!--确认-->
            </div>

        </el-dialog>
        <!--新增活动 end -->

    </div>
</template>

<script src="./main.js"></script>
<style lang="scss" scoped>
.total_number {
    margin-bottom: 16px;
    span {
        margin-right: 16px;
    }
}
.show_img {
    position: relative;
    .del_img {
        cursor: pointer;
        position: absolute;
        color: #fff;
        top: 5px;
        right: 5px;
        text-shadow: 0 0 3px #666;
    }
}
</style>
